<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
            <form action="" id="box">
            账号 <input type="text" id="i1">
            <span id="span1"></span>
            <br>
            昵称 <input type="text" id="i2">
            <span id="span2"></span>
            <br>
            电子邮件 <input type="text" id="i3">
            <span id="span3"></span>
            <br>
            身份证 <input type="text" id="i4">
            <span id="span4"></span>
            <br>
            手机号码 <input type="text" id="i5">
            <span id="span5"></span>
            <br>
            生日验证 <input type="text" id="i6">
            <span id="span6"></span>
            <br>
            密码   <input type="text" id="i7">
            <span id="span7"></span>
            <br>
            密码确认   <input type="text" id="i8">
            <span id="span8"></span>
            <br>
            <button id="btn">提交</button>
            <input type="reset">
        </form>

        







    <script>
        // 用户名
        i1.onblur=function(){
            if(this.value==""){
                span1.innerHTML="用户名不能为空"
                return
            }
            var reg=/^[a-zA-Z](\w|-){5,19}$/
            if(reg.test(this.value)){
                span1.innerHTML="验证成功"
            }else{
                span1.innerHTML="验证失败"
                
            }
        }
        // 昵称
        i2.onblur=function(){
            var reg=/^[\u4e00-\u9fa5]{3,6}$/
            if(reg.test(this.value)){
                span2.innerHTML="验证成功"
            }else{
                span2.innerHTML="验证失败"
            }
        }
        // 电子邮箱
        i3.onblur=function(){
            var reg=/^[0-9a-zA-Z]{6,11}@(163|qq|126)\.(com|cn|sina|net)/
            if(reg.test(this.value)){
                span3.innerHTML="验证成功"
            }else{
                span3.innerHTML="验证失败"
            }
        }
        // 身份证
        i4.onblur=function(){
            var reg=/^\d{17}(\d|x|X)$/
            if(reg.test(this.value)){
                span4.innerHTML="验证成功"
            }else{
                span4.innerHTML="验证失败"
            }
        }
        // 手机号码
        i5.onblur=function(){
            var reg=/^1[345678]\d{9}$/
            if(reg.test(this.value)){
                span5.innerHTML="验证成功"
            }else{
                span5.innerHTML="验证失败"
            }
        }
        // 生日验证
        i6.onblur=function(){
            var reg=/^\d{4}(\/|-)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
            if(reg.test(this.value)){
                span6.innerHTML="验证成功"
            }else{
                span6.innerHTML="验证失败"
            }
        }
        // 密码  
        i7.onblur=function(){
            var reg=/^\S{6,19}$/
            if(reg.test(this.value)){
                span7.innerHTML="验证成功"
            }else{
                span7.innerHTML="验证失败"
            }
        }
        // 密码确认
        i8.onblur=function(){
            if(i8.value==i7.value){
                span8.innerHTML="验证成功"
            }else{
                span8.innerHTML="验证失败"
            }
        }
        btn.onclick=function(){
            if(i8.value==i7.value){
                box.innerHTML="提交成功"
            }else{
                box.innerHTML="提交失败请重试"
                span8.innerHTML="验证失败"
                i7.value=""
            }
        }

    </script>
</body>
</html>